<template>
  <div class="app-container">
    <el-card >
      <!-- <el-button type="primary" v-permission="['admin', 'prize_create_role']" size="small" @click="showAddDialog">新增角色</el-button>
      
      <el-divider direction="horizontal" content-position="left"></el-divider> -->
      
      <el-table
        :data="rolesList"
        style="width: 100%;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" label="角色名">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色描述">
          <template slot-scope="scope">
            {{ scope.row.desc }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" v-permission="['admin', 'prize_update_role']" plain icon="el-icon-edit" @click="showUpdateDialog(row)">编辑权限</el-button>
            <el-button type="info" size="mini" v-permission="['admin', 'prize_set_people']" plain icon="el-icon-s-operation" @click="showSetDialog(row)">人员设置</el-button>
            <!-- <el-button type="danger" size="mini" v-permission="['admin', 'prize_delete_role']" plain icon="el-icon-delete" @click="del(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog :visible.sync="dialogAddVisible" title="新增角色">
      <el-form ref="form" :model="role" label-width="80px" :rules="rules" label-position="left">
        <el-form-item label="角色名" prop="name">
          <el-input size="small"  v-model="role.name" placeholder="角色名"  />
        </el-form-item>
        <el-form-item label="角色描述" prop="name">
          <el-input size="small" v-model="role.desc" placeholder="角色描述"  />
        </el-form-item>
        <el-form-item label="权限">
          <el-tree
            ref="tree"
            :check-strictly="checkStrictly"
            :data="permissionTree"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            class="permission-tree"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="primary" @click="addData()">确定</el-button>
        <el-button @click="dialogAddVisible=false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" title="编辑角色">
      <el-form ref="form" :model="role" label-width="80px" :rules="rules" label-position="left">
        <el-form-item label="角色名" prop="name">
          <el-input size="small" v-model="role.name" placeholder="角色名" disabled />
        </el-form-item>
        <el-form-item label="角色描述" prop="name">
          <el-input size="small" v-model="role.desc" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="权限">
          <el-tree
            ref="tree"
            :check-strictly="checkStrictly"
            :data="permissionTree"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            class="permission-tree"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="primary" @click="updateData()">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogSetVisible" title="人员设置">
      <el-form ref="form" :model="role" label-width="80px" :rules="rules" label-position="left">
        <el-form-item label="角色名" prop="name">
          <el-input size="small" v-model="role.name" placeholder="角色名" disabled />
        </el-form-item>
        
        <el-form-item label="角色描述" prop="name">
          <el-input size="small" v-model="role.desc" placeholder="" disabled />
        </el-form-item>

        <el-form-item label="人员" prop="person">
          <el-select size="small" style="width:100%" :filter-method="searchAccount" v-model="role.person" placeholder="请选择" multiple  filterable >
            <el-option v-for="item in options"
              :key="item.id"
              :label="item.realname"
              :value="item.id">
            </el-option>
          </el-select>
          
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="primary" @click="setData()">确定</el-button>
        <el-button @click="dialogSetVisible=false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script src="./role.js"></script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
